<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/lib-flexible/flexible.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 0;
        }
        .img--upload--container{
            font-size: 0;
        }
        .img--btn__upload{
            display: inline-block;
            width: 3.333333rem;
            height: 3.333333rem;
            background: #ff5b29;
            border-radius: 3px;
            position: relative;
            cursor: pointer;
        }
        .img--btn__upload::before,.img--btn__upload::after{
            font-size: 0;
            position: absolute;
            content: '';
            background: white;
            border-radius: 2px;
        }
        .img--btn__upload::before{
            width: 2.13333333rem;
            height: 2px;
            top: 1.626666667rem;
            left: .586666667rem;
        }
        .img--btn__upload::after{
            width: 2px;
            height: 2.13333333rem;
            top: .586666667rem;
            left: 1.626666667rem;
        }
        input{
            display: none;
        }
        .img--con{
            display: inline-block;
            width: 3.333333rem;
            height: 3.333333rem;
            position: relative;
            overflow: hidden;
            border-radius: 3px;
            border: 6px solid #fff;
            box-sizing: border-box;
        }
        .img--item{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="img--upload--container">
        <input type="file" multiple>
        <div class="img--btn__upload"></div>
    </div>

</body>
<script>
    var container = document.getElementsByClassName('img--upload--container')[0];
    var uploadBtn = document.getElementsByClassName('img--btn__upload')[0];
    var fileInput = document.getElementsByTagName('input')[0];
    var imgDataArr = [];
    var index = 0;
    uploadBtn.onclick = function(){
        fileInput.click();
    };
    fileInput.onchange = function (){
        var count = Math.min((9 - index), this.files.length);
        for(var i = 0; i < count; i++){
            var imgContainer = document.createElement('div');
            index ++;
            imgContainer.className = 'img--con';
            imgContainer['data-index'] = imgDataArr.length;
            imgContainer.onclick = function () {
                this.outerHTML = '';
                delete imgDataArr[this['data-index'] - 1];
                index --;
                if(index < 9) {
                    uploadBtn.style.display = 'block';
                }
            };
            var imgUrl = URL.createObjectURL(this.files[i]);
            imgDataArr.push(this.files[i]);
            if(index > 8) {
                uploadBtn.style.display = 'none';
            }
            var imgEle = document.createElement('img');
            imgEle.className = 'img--item';
            imgEle.src = imgUrl;
            imgEle.onload = function () {
                var imgSize = [this.width, this.height];
                if(imgSize[0] > imgSize[1]){
                    this.style.height = '3.333333rem';
                    this.style.left = -((imgSize[0]*(60/imgSize[1]) - 60)/2)/37.5 +"px";
                }else{
                    this.style.width = '3.333333rem';
                    this.style.top = -((imgSize[1]*(60/imgSize[0]) - 60)/2)/37.5 +"px";
                }
            };
            imgContainer.appendChild(imgEle);
            container.insertBefore(imgContainer, uploadBtn);
        };
        this.value = '';
    };
</script>
</html>